<template>
    <div class="page-article" >
        <div class="d-flex py-3 px-2 border-bottom">
            <div class="iconfont text-blue icon-yingxiongxiangqing"></div> 
            <strong class="flex-1 text-blue pl-2">
                {{model.title}}
            </strong>
            <div class="text-grey fs-xs">
                2021-06-27
            </div> 
        </div>
        <!-- 新闻体 -->
        <div v-html="model.body" class="py-3 article-body fs-lg"></div>
        <!-- 下部关联跳转 -->
        <div class="border-top py-3 px-3">
            <div class="d-flex ai-center">
                <i class="iconfont  icon-yingxiongxiangqing"/>
                <strong class="text-blue fs-lg ml-1">相关资讯</strong>
            </div>
        </div>
        <div class="pt-2 fs-lg">
            <router-link tag="div" :to='`/article/${item._id}`' class="py-1" v-for="item of model.related" :key="item._id">{{item.title}}</router-link>
        </div>
        
    </div>
</template>

<script>
export default {
    props:{
        id:{ requied:true }
    },
    data(){
        return{
            model:{}
        }
    },
    watch:{
        // 两种写法
        id:'fetch',//简写
        // id(){
        //     this.fetch()
        // }
    },
    methods:{
        async fetch(){
            // console.log(this.id);
         const res = await this.$http.get(`articles/${this.id}`)
         this.model = res.data
        }
    },
    created(){
        this.fetch()
    }
}
</script>

<style lang='scss' scoped>
    .page-article{
        .icon-Back{
            font-size:1.6923rem;
        }
        .article-body{
            img{
                max-width: 100%;
                height: auto;
                display: inline;
                text-align:center
            }
            iframe{
                width: 100%;
                height: auto;
            }
        }
    }
</style>